@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    height: r(300);
    position: absolute;
    top: 0;
    background: url(../img/bg2.png);
    background-size: 100% 100%;
    .header_top {
        width: r(585);
        margin: 0 auto;
        position: relative;
        top: r(-25);
        .top_left {
            a {
                font-size: r(38);
                color: white;
            }
        }
        .top_right {
            a {
                color: #e8e8ec;
            }
            i:nth-of-type(1) {
                font-size: r(27);
            }
        }
    }
    .header_bottom {
        width: r(585);
        margin: 0 auto;
        color: white;
        position: relative;
        top: r(42);
        line-height: r(35);
        a {
            color: white;
        }
        p:nth-of-type(1) {
            font-size: r(30);
            line-height: r(40);
        }
        p:nth-of-type(n+2) {
            font-size: r(20);
        }
        p:nth-of-type(2) {
            vertical-align: middle;
            img {
                width: r(23);
                height: r(14);
                vertical-align: middle;
            }
        }
        p:nth-of-type(3) {
            vertical-align: middle;
            img {
                width: r(18);
                height: r(21);
                vertical-align: middle;
            }
        }
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(300);
    bottom: r(52);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    article {
        width: r(585);
        margin: 0 auto;
        .theme_info {
            margin-top: r(28);
            p {
                font-size: r(20);
                line-height: r(30);
            }
        }
    }
    .more {
        text-align: center;
        margin-top: r(-32);
        border-bottom: 1px solid #dcdcdc;
        a {
            font-size: r(16);
            color: #000000;
            img {
                width: r(19);
                height: r(11);
            }
        }
    }
    .more_info {
        width: r(585);
        margin: 0 auto;
        margin-top: r(32);
        p {
            font-size: r(20);
            color: #585858;
            line-height: r(58);
            button {
                background: white;
                color: #a3a3a3;
                width: r(60);
                height: r(25);
                text-align: center;
                line-height: r(25);
                border-radius: r(5);
                border: 1px solid #A3A3A3;
                font-size: r(16);
            }
        }
    }
    .friends {
        margin-top: r(36);
        .nav {
            a {
                display: block;
                font-size: r(22);
                width: r(320);
                height: r(54);
                text-align: center;
                line-height: r(54);
                color: #343434;
            }
            a:active {
                border-bottom: 2px solid #333333;
            }
        }
        .people{
            width: r(585);
            margin: 0 auto;
            .people_top{
                height: r(120);
                .left{
                    width: r(60);
                    height: r(60);
                    img{
                        width: 100%;
                        height: 100%;
                       vertical-align: middle;
                    }
                }
                .right{
                    width: r(498);
                   line-height: r(25);
                   margin-top: r(37);
                   p:nth-of-type(1){
                        margin-bottom: r(6);                       
                       span:nth-of-type(1){
                           font-size: r(24);
                       }
                       span:nth-of-type(2){
                           font-size: r(21);
                       }
                   } 
                   p:nth-of-type(2){
                       font-size: r(16);
                      span{
                           border: 1px solid #cecece;
                           border-radius: r(5);
                           color: #CECECE;
                           text-align: center;
                      }
                   }
                }
            }
            .people_bottom{
                .bottom_info{
                   
                    p{
                        font-size: r(21);
                    }
                }
                .info_img{
                    margin-top: r(25);
                    width: r(212);
                    height: r(212);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .link{
                    ul{
                        li{
                            float: left;
                           
                            span{
                                color: #b8b8b8;
                                font-size: r(16);
                               vertical-align: middle;
                            }
                            img{
                                vertical-align: middle;
                            }
                        }
                        li:nth-child(2){
                            margin-left: r(32);
                            img{
                                width: r(15);
                                height: r(20);
                            }
                        }
                        li:nth-child(3){
                            margin-left: r(120);
                            img{
                                width: r(25);
                                height: r(6);
                            }
                        }
                        li:nth-child(4){
                            margin-left: r(56);
                         
                            img{
                                width: r(24);
                                height: r(24);
                                
                            }
                        }
                        li:nth-child(5){
                            margin-left: r(32);
                            img{
                                width: r(26);
                                height: r(24);
                                
                            }
                        }
                    }
                }
            }
        }
        
    }
}

footer {
    width: 100%;
    height: r(52);
    position: absolute;
    bottom: 0;
    border-top: 1px solid #e5e3de;
    
    .icon{
        width: r(97);
        height: r(80);
        position: relative;
        top: r(-60);
        margin: 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }
}